<script src="/js/validateIsMain.js"></script>
<div id="subContainer">
    <header class="page-header no-margin">
        <div class="container-fluid">
            <h2 class="no-margin-bottom" style="margin-top: 0px; font-size: 20px;">镜像详情</h2>
        </div>
    </header>

    <div class="breadcrumb-holder container-fluid">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">首页</a></li>
            <li class="breadcrumb-item"><a href="#">镜像</a></li>
            <li class="breadcrumb-item active">{{entity.id}}</li>
        </ul>
    </div>

    <section class="dashboard-counts no-padding-bottom">
        <div class="container-fluid">
            <div class="row bg-white has-shadow">
                <!-- Item -->
                <div class="col-xl-4 col-sm-6">
                    <div class="item d-flex align-items-center">
                        <div class="icon bg-violet"><i class="fa fa-file"></i></div>
                        <div class="title"><span>大小<br></span>
                            <div class="progress">
                                <div role="progressbar" style="width: 100%; height: 4px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{{entity.name}}</strong></div>
                    </div>
                </div>
                <!-- Item -->
                <div class="col-xl-4 col-sm-6">
                    <div class="item d-flex align-items-center">
                        <div class="icon bg-red"><i class="icon-padnote"></i></div>
                        <div class="title"><span>系统<br></span>
                            <div class="progress">
                                <div role="progressbar" style="width: 100%; height: 4px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-red"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{{entity.platform}}</strong></div>
                    </div>
                </div>
                <!-- Item -->
                <div class="col-xl-4 col-sm-6">
                    <div class="item d-flex align-items-center">
                        <div class="icon bg-green"><i class="icon-bill"></i></div>
                        <div class="title"><span>驱动<br></span>
                            <div class="progress">
                                <div role="progressbar" style="width: 100%; height: 4px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-green"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{{entity.driver}}</strong></div>
                    </div>
                </div>
            </div>
        </div>

        <section class="projects">
            <div class="container-fluid">
                <div class="project">
                    <div class="row bg-white has-shadow">
                        <div class="left-col col-lg-12 d-flex align-items-center justify-content-between">
                            <div class="project-title d-flex align-items-center">
                                <div class="icon bg-red"><i class="fa fa-tasks"></i></div>
                                <div class="text">
                                    <h3 class="h4 no-margin-top">网络信息</h3><small></small>
                                </div>
                            </div>
                            <div class="project-date">MAC地址：<span class="hidden-sm-down">{{entity.networkSettings.macAddress}}</span></div>

                            <div class="project-date">网关：<span class="hidden-sm-down">{{entity.networkSettings.gateway}}</span></div>

                            <div class="project-date">IP：<span class="hidden-sm-down">{{entity.networkSettings.ipAddress}}</span></div>
                            <div class="project-date">前缀长度: <span>{{entity.networkSettings.ipPrefixLen}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="feeds no-padding-top">
            <div class="container-fluid">
                <div class="row no-padding">
                    <!-- Trending Articles-->
                    <div class="col-lg-6 no-padding-left">
                        <div class="recent-activities card">
                            <div class="card-header">
                                <h3 class="h4">网络配置</h3>
                            </div>
                            <div class="card-body no-padding">
                                <div class="item">
                                    <div class="row">
                                        <div class="col-2 date-holder text-right">
                                            <div class="icon"><i class="fa fa-cogs"></i></div>
                                            <div class="date"> <br><span class="text-info">环境变量</span></div>
                                        </div>
                                        <div class="col-10 content">
                                            <h5>环境变量</h5>
                                            <p v-for="item in entity.config.env">{{item}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Check List -->
                    <div class="col-lg-6 no-padding-right">
                        <div class="recent-activities card">
                            <div class="card-header">
                                <h3 class="h4">容器配置</h3>
                            </div>
                            <div class="card-body no-padding">
                                <div class="item">
                                    <div class="row">
                                        <div class="col-2 date-holder text-right">
                                            <div class="icon"><i class="fa fa-cogs"></i></div>
                                            <div class="date"> <br><span class="text-info">环境变量</span></div>
                                        </div>
                                        <div class="col-10 content">
                                            <h5>环境变量</h5>
                                            <p v-for="item in entity.config.env">{{item}}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="row">
                                        <div class="col-2 date-holder text-right">
                                            <div class="icon"><i class="fa fa-cogs"></i></div>
                                            <div class="date"><br><span class="text-info">启动命令</span></div>
                                        </div>
                                        <div class="col-10 content">
                                            <h5>启动命令</h5>
                                            <p v-for="item in entity.config.cmd">{{item}}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="row">
                                        <div class="col-2 date-holder text-right">
                                            <div class="icon"><i class="fa fa-cogs"></i></div>
                                            <div class="date"><br><span class="text-info">映射端口</span></div>
                                        </div>
                                        <div class="col-10 content">
                                            <h5>映射端口</h5>
                                            <p v-for="(v, k) in entity.networkSettings.ports.bindings">{{k}} ==> {{v ? v[0] : ''}}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="row">
                                        <div class="col-2 date-holder text-right">
                                            <div class="icon"><i class="fa fa-cogs"></i></div>
                                            <div class="date"><br><span class="text-info">主机名称</span></div>
                                        </div>
                                        <div class="col-10 content">
                                            <h5>主机名称</h5>
                                            <p>{{entity.config.hostName}}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="row">
                                        <div class="col-2 date-holder text-right">
                                            <div class="icon"><i class="fa fa-cogs"></i></div>
                                            <div class="date"><br><span class="text-info">工作目录</span></div>
                                        </div>
                                        <div class="col-10 content">
                                            <h5>工作目录</h5>
                                            <p>{{entity.config.workingDir}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="row">
                                        <div class="col-2 date-holder text-right">
                                            <div class="icon"><i class="fa fa-cogs"></i></div>
                                            <div class="date"><br><span class="text-info">挂载卷</span></div>
                                        </div>
                                        <div class="col-10 content">
                                            <h5>挂载卷</h5>
                                            <p>{{entity.config.volumes}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="row">
                                        <div class="col-2 date-holder text-right">
                                            <div class="icon"><i class="fa fa-cogs"></i></div>
                                            <div class="date"><br><span class="text-info">使用镜像</span></div>
                                        </div>
                                        <div class="col-10 content">
                                            <h5>使用镜像</h5>
                                            <p>{{entity.config.image}}</p><p class="fa fa-link" style="color: #0f6674; cursor: pointer;" @click="linkToImagesDetails(entity.config.image)"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
    <footer class="main-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <p>Copyright &copy; 2019.Company name All rights reserved.More Templates <a
                            href="http://www.jq22.com/" target="_blank" title="jq22">jq22</a></p>
                </div>
                <div class="col-sm-6 text-right">
                    <p></p>
                </div>
            </div>
        </div>
    </footer>
</div>
<script>
    new Vue({
        el: '#subContainer',
        data: {
            entity: {},
            items: []
        },
        created: function () {
            this.loadEntity();
        },
        methods: {
            linkToImagesDetails(imageId) {
                toPage('/pages/images/details.html', imageId);
            },
            loadEntity() {
                let that = this;
                AJAX.GET('/container/' + sessionStorage.getItem('editParams'), {}, function (resp) {
                    that.entity = resp.data;
                })
            },
            textIdFilter(text) {
                if (text.length - 7 > 0) {
                    text = text.substr(7, text.length);
                    return text;
                }
                return text;
            },
        }
    })
</script>